<template>
  <div class="modulesWrapper">
    <div class="studentWrapper">
      <div class="filter">
        <el-input
          v-model="searchValue"
          style="max-width: 250px"
          placeholder="请输入名字或班级"
          class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search" @click="search()" />
          </template>
        </el-input>
        <div style="padding-left: 10px">
          <el-button type="primary" @click="AddStudent">新增学生</el-button>
          <el-button type="primary" @click="addMulStudent">批量新增</el-button>
        </div>
      </div>
      <div class="table">
        <el-table :data="data" border style="width: 100%" max-height="450">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="id" label="学号" />
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="sex" label="性别" />
          <el-table-column prop="age" label="年龄" />
          <el-table-column prop="class" label="班级" min-width="120" />

          <el-table-column prop="date" label="更新时间" min-width="120" />
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
              <el-button link type="danger" size="small" @click="deleteStudent(scope.row)">
                删除
              </el-button>
              <el-button link type="primary" size="small" @click="edit(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination background layout="prev, pager, next" :total="total" />
      </div>
    </div>
    <Teleport to="body">
      <StudentInfo
        v-if="dialogVisible"
        :visiable="dialogVisible"
        :action="action"
        @updateVisiable="updateVisiable"
      />
      <Uploads
        v-if="uploadVisible"
        :visiable="uploadVisible"
        :action="action"
        @updateVisiable2="updateVisiable2"
      />
    </Teleport>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import StudentInfo from './components/studentInfo.vue';
import Uploads from './components/uploadFile.vue';
import { ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
let arr = [];
for (let i = 0; i < 16; i++) {
  arr.push({
    name: 'tom' + i,
    sex: '1',
    age: 18,
    class: '一年级一班',
    id: 'ST' + i,
    date: '2016-10-03',
  });
}
const data = reactive(arr);
const total = ref(data.length);
const action = ref('');
const dialogVisible = ref(false);
const uploadVisible = ref(false);
const searchValue = ref('');

const deleteStudent = (row: any) => {
  console.log(row);
  ElMessage({
    message: '删除成功',
    type: 'success',
  });
};
const edit = (row: any) => {
  action.value = 'edit';
  dialogVisible.value = true;
  // console.log(dialogVisible.value);
};
const updateVisiable = (val: boolean) => {
  dialogVisible.value = val;
};
const updateVisiable2 = (val: boolean) => {
  uploadVisible.value = val;
};
const AddStudent = () => {
  dialogVisible.value = true;
  action.value = 'add';
};
const addMulStudent = () => {
  uploadVisible.value = true;
  action.value = 'addMul';
};
function search() {
  console.log(searchValue.value);
}
//  export {
//   data,
//   total,
//   form,
//   searchValue,
//   deleteStudent,
//   edit,
//   dialogVisible
// }
</script>
<style lang="scss" scoped>
@use './student-manage.scss';
</style>
